<template>
  <a-modal
    v-bind:visible="isShowAdd"
    width="50%"
    title="新增通知"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="onCancel"
  >
    <a-form-model ref="formRef" :rules="ruleForm" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
      <a-form-model-item label="用户ID" prop="uid">
        <a-input v-model="form.uid" placeholder="请输入用户ID"></a-input>
      </a-form-model-item>
      <a-form-model-item label="通知标题" prop="title">
        <a-input v-model="form.title" placeholder="请输入通知标题"></a-input>
      </a-form-model-item>
      <a-form-model-item label="通知内容" prop="content">
        <quill-editor v-model="form.content" placeholder="请输入通知内容"></quill-editor>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { addUserNotifyAPI } from '@/api/transaction.js'
export default {
  name: 'AddSubplan',
  props: {
    isShowAdd: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isShowAdd(boolean) {
      if (boolean) {
        console.log(1)
      } else {
        this.$refs.formRef.resetFields()
      }
    }
  },
  data() {
    return {
      form: {
        uid: '',
        content: '',
        title: '',
        type_id: '',
        type: ''
      },
      ruleForm: {
        uid: [{ required: true, message: '请输入用户ID' }],
        title: [{ required: true, message: '请输入通知标题' }],
        content: [{ required: true, message: '请输入通知内容' }]
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        try {
          await addUserNotifyAPI(this.form)
          this.$emit('upload')
          this.$emit('update:isShowAdd', false)
          this.$message.success('操作成功')
        } catch (error) {
          this.$message.error(error.data.msg)
        }
      })
    },
    onCancel() {
      this.$emit('update:isShowAdd', false)
    }
  }
}
</script>

<style lang="less" scoped></style>
